import type { PropType } from 'vue'
import type { ExtractProps } from '@/utils/type'
import styleVar from '@/styles/variable.module.scss'
import { toStrFirstCase } from '@/utils'

type ExtractWords<T extends string> = 
  T extends `${infer Word} ${infer Rest}` 
    ? Word | ExtractWords<Rest> 
    : T
namespace Button {
  export const name = toStrFirstCase(`${styleVar.namespace}Button`)
  export const props = {
    disabled: Boolean,
    loading: Boolean,
    type: {
      type: String as PropType<ExtractWords<typeof styleVar.types>>,
      default: styleVar.types.split(' ')[0]
    },
    icon: String
  }
  export const emits = {
    click: (_e: MouseEvent) => true
  }
  export type Props = ExtractProps.Types<typeof props> & PartialEmits<typeof emits>
  export type Slots = {
    default: () => void,
    loading: () => void
  }
  export const Component = <{
    new(): {
      $props: Props
      $slots: Slots
    }
  }>{}
}
export default Button